<template>

  <div class="common-layout">
    <!--  <el-container>  响应式布局 可嵌套 -->
      <el-container> 
        
      <!-- 头部 -->
        <el-header style="padding: 0; height: 50px;">
            
           <!-- 头部渲染 -->
            <Header></Header>
  
        </el-header>

      <!-- 身体 -->
        <el-container>
         <!-- 侧边框组件 -->
          <el-aside width="200px">
  
           <!-- 侧边栏区域渲染 -->
            <Asider></Asider>
  
          </el-aside>

      <!-- 主体 -->
          <el-container>
           <!-- 主要内容 -->
            <el-main>

             <!-- 动态加载不同路由对应的视图 -->
              <RouterView />
  
              
            </el-main>
  
  
            <el-footer>Footer</el-footer>
          </el-container>
        </el-container>
      </el-container>
    </div>
      
  </template>
  
  <script setup>
  // 导入组件
  import Asider from '@/components/Asider.vue'
  import Header from '@/components/Header.vue'
  
  </script>
  
  <style scoped>
  
  </style>
